.banner {
    position: relative;

    .banner__image {
        height: 18rem;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    > .banner__wrap {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.4rem;
        background-color: #fff;
        z-index: 997;

        .banner__anno {
            width: 100%;
            text-align: center;
            animation: fadeIn 1s forwards;

            > p {
                font-size: 16px;
            }

            > a {
                margin: 0 auto;
                width: 6rem;
                display: block;
                border: 1px solid #333;
                padding: 0.275rem 0;
                transition: all 0.3s ease;

                &:hover {
                    background-color: #333;
                    color: #fff;
                }
            }
        }
    }

    > :global(.btn) {
        opacity: 0;
        color: white;
        font-size: 20px;
        position: absolute;
        top: calc(50% - 25px);
        width: 50px;
        height: 50px;
        background-color: #00000050;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 998;

        &:hover {
            background-color: #00000080;
        }

        &.banner__btn__forward {
            left: 0;
        }
        &.banner__btn__next {
            right: 0;
        }
    }

    &:hover > :global(.btn) {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
